<template>
  <div>
    <el-button type="success" size="small" @click="editVisible()" class="addButton">{{$t('添加')}}</el-button>
    <el-button type="danger" slot="reference" size="small" @click="del_addr" class="delButton">{{$t('删除')}}</el-button>
    <el-table size='mini' ref="multipleTable" :data="addr_list" tooltip-effect="dark" header-align="center" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="70" align="center">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('名称')" min-width="170" align="center">
        <template slot-scope="scope">
          <tooltip :html="scope.row.name" :content="scope.row.name" class="wid190" :refName="scope.row.name">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ip_type" :label="$t('类型')" min-width="100" align="center">
        <template slot-scope="scope">
          {{ipTypeList[scope.row.ip_type].lable}}
        </template>
      </el-table-column>
      <el-table-column prop="ip" :label="$t('IP地址')" align="center" min-width="150">
        <template slot-scope="scope">
          <tooltip :html="classMapShow(scope.row,';<br/>')" :content="classMapShow(scope.row,',')" class="wid190" :refName="scope.row.name"></tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="mask" :label="$t('子网掩码')" align="center" min-width="150">
        <template slot-scope="scope">
          <tooltip :html="scope.row.mask" :content="scope.row.mask" class="wid190" :refName="scope.row.mask">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="mac" :label="$t('MAC地址')" align="center" min-width="150">
        <template slot-scope="scope">
          <tooltip :html="scope.row.mac" :content="scope.row.mac" class="wid190" :refName="scope.row.mac">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="ref" :label="$t('引用计数')" align="center" min-width="85">
      </el-table-column>
      <el-table-column prop="sys" fixed="right" :label="$t('操作')" align="center" min-width="80">
        <template slot-scope="scope">
          <el-button v-if="scope.row.sys === 0" type="success" plain size="mini" :class="'edit' + scope.$index" @click="editVisible(scope.row)">
            {{$t('编辑')}}
          </el-button>
          <span v-if="scope.row.sys === 1">{{$t('系统默认')}}</span>
        </template>
      </el-table-column>
    </el-table>
    <ListTools v-if="ListToolsVisible" @listData='listData' ref="refListToolsVisible"></ListTools>
  </div>
</template>

<script>
import ListTools from './ListTools'
import { getAddrArray, delAddrData } from '@/api/list/addr'
export default {
  name: 'List',
  components: {
    ListTools
  },
  data () {
    return {
      addr_list: [],
      ListToolsVisible: false,
      multipleSelection: [],
      ipTypeList: {
        1: { lable: 'IPv4', value: 'ipv4' },
        2: { lable: 'IPv4-NET', value: 'ipv4-net' },
        3: { lable: 'IPv4-RANGE', value: 'ipv4-range' },
        4: { lable: 'IPv6', value: 'ipv6' },
        5: { lable: 'IPv6-NET', value: 'ipv6-net' },
        7: { lable: 'MAC', value: 'mac' }
      }
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    listData () {
      getAddrArray().then(response => {
        this.addr_list = response.info
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    del_addr () {
      // this.visible = false
      if (this.multipleSelection.length === 0) {
        this.$messages.error(this.$t('请至少选择一条数据进行删除'))
        return
      }
      let formData = {}
      formData.name = ''
      for (let item of this.multipleSelection) {
        // if (item.ref > 0) {
        //   this.$messages.error('【' + item.name + '】对象被引用，无法删除')
        //   return
        // }
        formData.name += item.name + '@#@'
      }
      this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delAddrData(formData).then(response => {
          if (response.status === 0) {
            this.$messages.success(this.$t('删除成功'))
          }
          this.listData()
        })
      })
    },
    classMapShow (data, str) {
      let reStr = ''
      data.ip.forEach((val, index) => {
        if (index < 1 && str === ',') {
          reStr += val
        } else if (str === ',') {
          reStr += str + val
        } else {
          reStr += val + str
        }
      })
      return reStr
    },
    editVisible (data) {
      this.ListToolsVisible = true
      this.$nextTick(() => {
        this.$refs.refListToolsVisible.init(data)
      })
    }
  }
}
</script>

<style scoped>
</style>
